<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>首页 {$site_info.site_name|default=''}</title>
    <meta name="keywords" content="{$site_info.site_seo_keywords|default=''}" />
    <meta name="description" content="{$site_info.site_seo_description|default=''}">
    <include file="public@head" />
    <link rel="stylesheet" href="/assets/dist/js/editor/css/editormd.css" />
    <link href="__STATIC__/js/tag-editor/jquery.tag-editor.css" rel="stylesheet" type="text/css">
    <script type="text/html" id="photos-item-tpl">
        <li id="saved-image{id}" class="mb-2 pb-2 border-bottom" style="width: 100%">
            <input id="photo-{id}" type="hidden" name="photo_urls[]" value="{filepath}">
            <input class="form-control" id="photo-{id}-name" type="hidden" name="photo_names[]" value="{name}" />
            <img id="photo-{id}-preview" src="{url}" style="width: 34%" onclick="imagePreviewDialog(this.src);">
            <textarea class="form-control" id="photo-{id}-caption" name="photo_captions[]"
                style="height: 120px;width: 58%" placeholder="请输入作品注释" title="{name}"></textarea>
            <!-- <a class="btn btn-sm btn-primary" href="javascript:uploadOneImage('图片上传','#photo-{id}');">替换</a> -->
            <a class="btn btn-sm btn-info" href="javascript:(function(){$('#saved-image{id}').remove();})();">移除</a>
        </li>
    </script>
    <style type="text/css">
        .tab-content {
            overflow: visible;
        }

        .uploaded_avatar_area {
            margin-top: 20px;
        }

        .uploaded_avatar_btns {
            margin-top: 20px;
        }

        .uploaded_avatar_area .uploaded_avatar_btns {
            display: none;
        }
    </style>
</head>

<body>
    <div class="wrapper hp_1" id="add-article">
        <include file="public@nav" />
        <div class="container upload-wrapper my-4">
            <div class="row">
                <div class="col-3">
                    <div class="list-group">
                        <a href="{:cmf_url('portal/Article/add')}"
                            class="list-group-item list-group-item-action active">发布作品</a>
                    </div>
                </div>
                <div class="col-9">
                    <form action="{:cmf_url('portal/Article/addPost')}" method="post"
                        class="form-horizontal js-ajax-form form-work">
                        <div class="card mb-2">
                            <div class="card-header">
                                作品信息 <span class="ml-4 text-black-50">作品信息完善有助于搜索推荐。</span>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label class="col-xs-2 control-label">作品名称<span class="required"
                                            aria-required="true">*</span></label>
                                    <div class="col-xs-10">
                                        <input class="form-control" required type="text" name="post[post_title]"
                                            id="title" required="" value="" placeholder="请输入作品名称" aria-required="true">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-2 control-label">作品类别<span class="required">*</span></label>
                                    <div class="col-xs-10">
                                        <select class="form-control" required name="post[categories]">
                                            <option value=''>请选择作品类别</option>
                                            <volist name="$categoryTree" id="item">
                                                <option value='{$item.id}'>{$item.name}</option>
                                            </volist>

                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-2 control-label">作品介绍<span class="required"
                                            aria-required="true">*</span></label>
                                    <div class="col-xs-10">
                                        <div id="test-editor">
                                            <textarea style="display:none;" required name="post[post_content]">
                                            </textarea>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                作品封面 <span class="required">*</span> <span
                                    class="ml-4 text-black-50">支持jpg,png,jpeg格式,封面图片大小最大不能超过5M。</span>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <div class="col-xs-10 work-thumbnail">
                                        <div class="article-thumbnail-action text-center" data-toggle="modal"
                                            data-target="#coverUploadModal"
                                            style="background: #f5f5f5;cursor: pointer;padding: 20px;">
                                            <p><i class="fa fa-2x fa-plus-circle text-info"></i>
                                            <h5> 点击上传作品封面</h5>
                                            </p>
                                        </div>
                                        <div class="work-thumbnail-preview" style="display: none;">
                                            <img src="" id="work-thumbnail-img" class="w-100">
                                            <div class="work-thumbnail-edit" data-toggle="modal"
                                                data-target="#coverUploadModal">
                                                <input type="hidden" name="post[more][thumbnail]" id="thumbnail"
                                                    required value="">
                                                <h5 class="text-center">
                                                    <i class="fa fa-2x fa-edit"></i>
                                                    <br>修改封面
                                                </h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="my-3">
                            <button class="btn btn-warning js-ajax-submit btn-work-save"
                                style="width: 200px;">确认发布</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- 封面上传Modal -->
        <div id="coverUploadModal" class="modal fade cover-upload-modal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">封面上传</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p style="display: none;"><span id="upload-tips">当前剪裁尺寸：540x540</span>，建议尺寸：540x540或以上</p>
                        <div class="row" style="padding: 0 7px;">
                            <div class="col-12">
                                <div class="cover-action">
                                    <div class="text-box">
                                        <i class="fa fa-plus-circle fa-2x text-color-blue"></i>
                                        <br> 点击上传作品封面
                                        <br>
                                        <span class="tips">支持jpg,png,jpeg格式,封面图片大小最大不能超过5M</span>
                                    </div>
                                    <div class="input-box">
                                        <input type="file" onchange="avatar_upload(this)" id="avatar_uploder"
                                            name="file" />
                                        <div class="uploaded_avatar_area"></div>
                                    </div>
                                </div>
                                <div class="cover-action-reload mt-3" style="display: none;">
                                    <label class="" for="avatar_uploder" title="">
                                        <span class="btn btn-warning" data-original-title="">重新上传</span>
                                    </label>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="mx-auto">
                            <button type="button" class="btn btn-warning confirm_avatar_btn"
                                onclick="update_avatar()">确定</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <include file="public@scripts" />
        <script src="/assets/dist/js/editor/editormd.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var editor = editormd("test-editor", {
                    width: "100%",
                    height: "400px",
                    path: "/assets/dist/js/editor/lib/",
                    imageUpload: true,
                    imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                    imageUploadURL: "{:cmf_url('portal/Article/uploadImg')}", //上传图片用，，这是tp的上传
                    saveHTMLToTextarea: true

                });
            });
            //判断是否上传作品封面
            $('#addPost').click(function (event) {
                event.stopPropagation(); //  阻止事件冒泡
                let thumbnail = $('#thumbnail').val();
                if (thumbnail == '' || thumbnail == null) {
                    //弹出静态框 显示封面图上传
                    $('#addThumbnailModal').click();
                } else {
                    $('#form').submit();
                }
            })
            $('#checkThumbnailIsUpload').click(function (event) {
                let thumbnail = $('#thumbnail').val();
                if (thumbnail == '' || thumbnail == null) {} else {
                    $('#form').submit();
                }

            })
        </script>
        <script type="text/javascript">
            // $('#coverUploadModal').modal({ backdrop: 'static', keyboard: false });
            function update_avatar() {
                var area = $(".uploaded_avatar_area img").data("area");
                if (area == null || area == '') {
                    Wind.use("noty", function () {
                        noty({
                            text: "请上传封面图片！",
                            type: 'info',
                            layout: 'center',
                            callback: {
                                afterClose: function () {
                                    //回调
                                }
                            }
                        });
                    });
                    return false;
                }

                $.post("{:cmf_url('portal/Article/thumbnailUpdate')}", area, function (data) {
                    if (data.code == 1) {
                        $('#work-thumbnail-img').attr("src", '');

                        $('#thumbnail').val(data.data.file);
                        $('.article-thumbnail-action').hide();

                        var src = "__ROOT__/upload/" + data.data.file;
                        $('#work-thumbnail-img').attr("src", src);

                        $('.work-thumbnail-preview').show();

                        $('#coverUploadModal').modal('hide');
                        $('.modal-backdrop').hide();
                    }

                }, "json");

            }

            //变量定义
            var boundx = 0,
                boundy = 0;
            var $preview = $('.preview-pane'),
                $previewBox = $('.preview-box'),
                $coverBox = $('.cover-action'),
                $coverBoxReload = $('.cover-action-reload');

            function avatar_upload(obj) {
                var $fileinput = $(obj);
                /* $(obj)
                 .show()
                 .ajaxComplete(function(){
                 $(this).hide();
                 }); */
                Wind.css("jcrop");
                Wind.use("ajaxfileupload", "jcrop", "noty", function () {
                    $.ajaxFileUpload({
                        url: "{:cmf_url('portal/article/coverUpload')}",
                        secureuri: false,
                        fileElementId: "avatar_uploder",
                        dataType: 'json',
                        data: {},
                        success: function (data, status) {
                            if (data.code == 1) {
                                $('.cover-action-reload').show();
                                $("#avatar_uploder").hide();
                                $(".text-box").hide();
                                var $uploaded_area = $(".uploaded_avatar_area");

                                $uploaded_area.find("img").remove();
                                $uploaded_area.find(".jcrop-holder").remove();

                                var src = "__ROOT__/upload/" + data.data.file;

                                var img = new Image();
                                img.src = src;

                                //图片上传完后回调函数
                                var callback = function () {
                                    boundx = img.width;
                                    boundy = img.height;

                                    var boxRatio = $coverBox.height() / $coverBox.width();
                                    var imgRatio = boundy / boundx;

                                    var marginTop = 0,
                                        marginLeft = 0;

                                    //候选图片显示区
                                    if (boxRatio > imgRatio) {
                                        var $img = $("<img/>").attr("src", src).attr("width",
                                            $coverBox.width());
                                        marginTop = ($coverBox.height() - $coverBox.width() *
                                            imgRatio) / 2;
                                    } else {
                                        var $img = $("<img/>").attr("src", src).attr("height",
                                            $coverBox.height());
                                        marginLeft = ($coverBox.width() - $coverBox.height() /
                                            imgRatio) / 2;
                                    }

                                    //裁剪预览
                                    var $imgPreview = $("#preview-img").attr("src", src);

                                    $('.jcrop-holder').css({
                                        "width": '100%',
                                    });

                                    $uploaded_area.css({
                                        "margin-left": marginLeft,
                                        "margin-top": marginTop,
                                    });

                                    $img.prependTo($uploaded_area);
                                    $(".uploaded_avatar_btns").show();

                                    //显示重新上传
                                    $coverBoxReload.show();

                                    //图片裁剪
                                    $img.Jcrop({
                                        aspectRatio: 1,
                                        trueSize: [img.width, img.height],
                                        setSelect: [0, 0, 540, 540],
                                        onSelect: function (c) {
                                            $img.data("area", c);
                                            showCoords(c);
                                            showPreview(c);
                                        },
                                        onChange: function (c) {
                                            showCoords(c);
                                            showPreview(c);
                                        },
                                    });
                                }

                                if (img.complete) {
                                    callback();
                                } else {
                                    img.onload = callback;
                                }

                            } else {
                                noty({
                                    text: data.msg,
                                    type: 'error',
                                    layout: 'center',
                                    callback: {
                                        afterClose: function () {
                                            //reloadPage(window);
                                        }
                                    }
                                });
                            }

                        },
                        error: function (data, status, e) {}
                    });
                });

                return false;
            }

            $(function () {
                //监听作品标题的输入值
                $('input[name="post[work_title]"]').bind('input porpertychange', function () {
                    wortTile = $(this).val();
                    if (wortTile.length > 0) {
                        $('.caption h4').text(wortTile);
                    }
                });

                //监听图片和封面必填字段
                $('.form-work .btn-work-save').click(function (event) {
                    var $form = $('.form-work');

                    var photos = $form.find('ul#photos').children('li').length;
                    var thumbnail = $form.find('#thumbnail').val();

                    // if (photos == 0) {
                    //     $form.find('.btn-add-article').css({
                    //         border: 'red solid 1px!important',
                    //     });
                    //     $form.find('.btn-add-article').focus();
                    //     return false;
                    // }

                    if (thumbnail == "") {
                        $form.find('.article-thumbnail-action').css({
                            border: 'red solid 1px',
                        });
                        $form.find('.article-thumbnail-action').focus();
                        return false;
                    }
                });
            });

            function showCoords(c) {
                if (boundx < 540 && boundy < 540) {
                    $('#upload-tips').html("你上传的图片太小了，需要清晰的封面图~");
                } else {
                    $('#upload-tips').html("当前剪裁尺寸：" + Math.floor(c.w) + "x" + Math.floor(c.h));
                }
                $('#upload-tips').parent().show();
            }

            function showPreview(coords) {
                var scaleW = $previewBox.width();

                var rx = scaleW / coords.w;
                var ry = scaleW / coords.h;

                $('#preview-img').css({
                    width: Math.round(rx * boundx) + 'px',
                    height: Math.round(ry * boundy) + 'px',
                    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                    marginTop: '-' + Math.round(ry * coords.y) + 'px'
                });

            }
        </script>

</body>

</html>